<template>
	<view style="height: 100%">
		<!-- 遮罩层 -->
		<view class="mask pay-actionsheet-mask" :class="[show ? 'pay-mask-show' : '']"></view>
		<!-- 组件内容 -->
		<view class="bg-light fixed-bottom pay-actionsheet" :class="[show ? 'pay-actionsheet-show' : '']">
			<view class="h2 text-muted" style="position: absolute; top: 0; right: 20rpx" @tap="handleClose()">×</view>
			<view class="text-center">
				<text class="font">充值金额</text>
			</view>
			<view class="flex justify-center">
				<view class="font-weight-bold text-center pt-5 flex align-center">
					<text class="font-lg">￥</text>
					<input @change="check" maxlength="10" class="font-lg" style="text-align: left"
						placeholder="请输入充值金额(只支持整数如:1)" v-model="form.Recharge_Amount"
						placeholder-class="font-md font-weight-bold" type="number" />
				</view>
			</view>
			<view class="text-center py-5">
				<text class="font-lg font-weight-bold">请选择充值方式(最低额度为200)</text>
			</view>
			<!-- 支付方式 -->
			<radio-group class="pt-3">
				<label v-for="(item, index) in way" :key="index" style="position: relative"
					class="mx-4 mt-2 bg-white p-3 flex align-center rounded-lg">
					<image :src="Domain_ICON + item.icon" class="rounded" style="width: 35rpx; height: 35rpx" mode="">
					</image>
					<text class="font-md ml-2 font-weight-bold">{{ item.value }}</text>
					<radio style="transform: scale(0.7); position: absolute; right: 20rpx" :checked="item.select" />
				</label>
			</radio-group>
			<view class="px-4 py-2 fixed-bottom">
				<view class="bg-info rounded text-center py-3 text-white font-weight-bold font" @click="submit()"
					hover-class="bg-hover-info" :hover-stay-time="150">微信支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import times from "@/mixins/time.js";
	export default {
		data() {
			return {
				loading: false, //节流
				form: {
					Recharge_Amount: "",
					Collection_Type: "微信支付",
					App_ID: app.globalData.appid,
					Open_ID: app.globalData.openid,
					Enterprise_Info_SerialNumber: app.globalData.enterprise,
				},
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
			};
		},
		props: {
			show: {
				//显示支付方式
				type: Boolean,
				default: false,
			},
			way: {
				//支付方式
				type: Array,
				default: function() {
					return [{
						icon: "/WXlogo.png",
						value: "微信支付",
						select: true,
					}, ];
				},
			},
		},
		methods: {
			handleClose() {
				//关闭
				this.$emit("Close");
			},
			check(e) {
				//防止用户输入小数点
				this.form.Recharge_Amount = parseInt(e.detail.value);
				console.log(this.form.Recharge_Amount);
			},
			submit() {
				//校验库存
				let that = this;
				this.form.Recharge_Amount = this.form.Recharge_Amount + "";
				if (this.form.Recharge_Amount.trim() == "") {
					uni.showToast({
						title: "请输入充值金额",
						icon: "error",
					});
					return;
				}
				if (!this.loading) {
					this.loading = true;
					uni.showLoading({
						title: "提交中...",
					});
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/WXWeChatRechargeJSAPIAction",
						method: "POST",
						data: this.form,
						success: (res) => {
							console.log(res);
							let appId = res.data.sdk_appid;
							let timeStamp = res.data.sdk_timestamp + "";
							let nonceStr = res.data.sdk_noncestr;
							let packageX = res.data.sdk_package;
							let signType = res.data.sdk_signtype;
							let paySign = res.data.sdk_paysign;
							if (res.data.result_msg == "SUCCESS") {
								uni.hideLoading();
								uni.requestPayment({
									provider: "wxpay",
									appId: appId,
									timeStamp: timeStamp,
									nonceStr: nonceStr,
									package: packageX,
									signType: signType,
									paySign: paySign,
									success: function(res) {
										uni.showToast({
											title: "支付成功！",
											icon: "success",
											success() {
												uni.navigateTo({
													url: `/pages/paycomplete/paycomplete?price=${that.form.Recharge_Amount}`,
												});
											},
										});
									},
									fail: function(err) {
										console.log(err);
										uni.showToast({
											title: "已取消！",
											icon: "error",
										});
									},
									//调起支付后打开懒加载
									complete: () => {
										this.loading = false;
										uni.hideLoading();
									},
								});
							} else if (res.data.result_msg == "fail") {
								this.loading = false;
								uni.hideLoading();
								uni.showToast({
									title: "小于最低储值额",
									icon: "error",
								});
							} else {
								this.loading = false;
								uni.hideLoading();
								uni.showToast({
									title: "提交失败，请重试！",
									icon: "error",
								});
							}
						},
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.pay-actionsheet {
		width: 100%;
		height: 100%;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.pay-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.pay-actionsheet-mask {
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.pay-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>